<template>
  <div>
    <el-button type="warning" plain icon="search" @click="showDialog">
      查询员工信息
    </el-button>
    <el-dialog
      title="查询员工信息"
      v-model="dialogVisible"
      width="50%"
      style="border-radius: 10px; padding: 5px 10px"
      destroy-on-close
      @closed="closed"
    >
      <el-row style="margin-bottom: 10px">
        <el-col :span="12">
          <el-form
            :model="form"
            ref="ruleFormRef"
            :rules="rules"
            label-width="auto"
          >
            <el-form-item label="员工姓名" prop="empName">
              <el-input
                v-model="form.empName"
                style="width: 220px"
                placeholder="请输入要查询员工的姓名"
                clearable
              />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-button
            type="primary"
            @click="getEmpInfo"
            :loading="buttonLoading"
          >
            查询
          </el-button>
        </el-col>
      </el-row>
      <div>
        <!-- 头部渲染表格 -->
        <el-descriptions :column="2" border>
          <el-descriptions-item width="100" label="员工工号">
            {{ info.num }}
          </el-descriptions-item>
          <el-descriptions-item width="100" label="姓名">
            {{ info.name }}
          </el-descriptions-item>
          <el-descriptions-item label="出生日期">
            {{ info.birthday }}
          </el-descriptions-item>
          <el-descriptions-item label="身份证号">
            {{ info.idNum }}
          </el-descriptions-item>
          <el-descriptions-item label="部门">
            <el-text v-for="(item, index) in info.deptNames" :key="index">
              {{ item }}
              <br />
            </el-text>
          </el-descriptions-item>
          <el-descriptions-item label="岗位">
            <el-text v-for="(item, index) in info.postName" :key="index">
              {{ item }}
              <br />
            </el-text>
          </el-descriptions-item>
          <el-descriptions-item label="职务">
            {{ info.roleName }}
          </el-descriptions-item>
          <el-descriptions-item label="级别">
            {{ info.grade }}
          </el-descriptions-item>
          <el-descriptions-item label="邮箱地址">
            {{ info.email }}
          </el-descriptions-item>
          <el-descriptions-item label="联系电话1">
            {{ info.phoneNum1 }}
          </el-descriptions-item>
          <el-descriptions-item label="联系电话2">
            {{ info.phoneNum2 }}
          </el-descriptions-item>
          <el-descriptions-item label="通信地址">
            {{ info.address }}
          </el-descriptions-item>
        </el-descriptions>
        <!-- 内容渲染表格 -->
        <el-descriptions direction="vertical" :column="1" border>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { showEmpInfo } from "@/service/api/user";

import { dayjs } from "element-plus";

const dialogVisible = ref(false);

const info = ref({
  num: "",
  name: "",
  grade: null,
  phoneNum1: "",
  phoneNum2: "",
  email: "",
  idNum: "",
  birthday: "",
  address: "",
  deptNames: [],
  postName: [],
  roleName: "",
});

const form = ref({
  empName: "",
});

const showDialog = async () => {
  dialogVisible.value = true;
};

const ruleFormRef = ref();
const rules = ref({
  empName: [
    { required: true, message: "查询员工姓名为空，请填写", trigger: "blur" },
  ],
});
const buttonLoading = ref(false);

const resetData = () => {
  info.value = {
    num: "",
    name: "",
    grade: null,
    phoneNum1: "",
    phoneNum2: "",
    email: "",
    idNum: "",
    birthday: "",
    address: "",
    deptNames: [],
    postName: [],
    roleName: "",
  };
};

const getEmpInfo = async () => {
  if (!ruleFormRef.value) return false;
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      resetData();
      buttonLoading.value = true;
      const res = await showEmpInfo(form.value.empName);
      if (res) {
        info.value = res;
        info.value.birthday = dayjs(info.value.birthday).format("YYYY-MM");
      }
      buttonLoading.value = false;
    } else {
      return false;
    }
  });
};

const closed = () => {
  resetData();
  form.value = {
    empName: "",
  };
};
</script>
<style lang="scss">
.menu {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.tip {
  margin-left: 55px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  gap: 0.3125rem;
  .el-text {
    line-height: 12px;
  }
}
</style>
